<script setup lang="ts">
import { Cartesian2, Cartesian3, Color, UrlTemplateImageryProvider, Viewer } from 'cesium'
import { onMounted } from 'vue'

onMounted(() => {
  const viewer = new Viewer('cesiumContainer', {
    // 搜索按钮
    geocoder: false,
    // 主页按钮
    homeButton: false,
    // 投影按钮
    sceneModePicker: false,
    // 图层选择按钮
    baseLayerPicker: false,
    // 帮助按钮
    navigationHelpButton: false,
    // 动画控件
    animation: false,
    // 时间线控件
    timeline: false,
    // 全屏按钮
    fullscreenButton: false,
    // 去掉版本
    creditContainer: document.createElement('div'),
    // 去掉星空背景
    skyBox: false,
    baseLayer: false,
    // 禁用信息框
    infoBox: false,
    // 禁用选中指示器
    selectionIndicator: false,
  })

  const subdomains = ['1', '2', '3', '4']

  // 高德影像底图
  const gaodeImageryProvider = new UrlTemplateImageryProvider({
    url: 'https://wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&style=6',
    subdomains: subdomains,
  })
  viewer.imageryLayers.addImageryProvider(gaodeImageryProvider)

  viewer.entities.add({
    position: Cartesian3.fromDegrees(116.33, 39.5),
    point: {
      // 点的颜色
      color: Color.YELLOW,
      // 轮廓颜色
      outlineColor: Color.RED,
      // 轮廓宽度
      outlineWidth: 4,
      // 点的大小
      pixelSize: 20,
    },
    label: {
      text: '北京野生动物园',
      font: '14px Helvetica',
      // 文字颜色
      fillColor: Color.WHITE,
      // 不显示背景色
      showBackground: false,
      // 垂直偏移
      pixelOffset: new Cartesian2(0, -30),
    },
  })

  viewer.entities.add({
    position: Cartesian3.fromDegrees(116.3365, 39.5),
    billboard: {
      image: '/location_fill_yellow.png',
      width: 30,
      height: 30,
    },
    label: {
      text: '北京野生动物园',
      font: '14px Helvetica',
      // 文字颜色
      fillColor: Color.WHITE,
      // 不显示背景色
      showBackground: false,
      // 垂直偏移
      pixelOffset: new Cartesian2(0, -30),
    },
  })

  viewer.camera.flyTo({
    destination: Cartesian3.fromDegrees(116.33, 39.5, 2700),
  })
})
</script>

<template>
  <div id="cesiumContainer"></div>
</template>

<style scoped></style>
